import { useState } from 'react'
import Navbar from '../../compoents/Navbar'
import { Card, Radio, Button, Toast } from 'antd-mobile'
import style from './index.module.css'
import { useNavigate } from 'react-router-dom'
import request from '../../api/request'

// 申请项目数据
const applicationItems = [
  {
    id: 1,
    name: '新冠预防中药 (正常人群)',
    quantity: '1剂',
    price: 11.80,
    type: 'medicine',
    tags: ['处方药', '限购5剂']
  },
  {
    id: 2,
    name: '云南白药胶囊 0.5g*20片',
    quantity: '1盒',
    price: 10.08,
    type: 'medicine',
    tags: ['处方药']
  },
  {
    id: 3,
    name: '动态心电图',
    quantity: '1次',
    price: 150.00,
    type: 'service'
  },
  {
    id: 4,
    name: '血常规',
    quantity: '1次',
    price: 29.12,
    type: 'service'
  }
]

function Index() {
  const navigate = useNavigate()
  const [paymentMethod, setPaymentMethod] = useState('self')

  // 计算总金额
  const totalAmount = applicationItems.reduce((sum, item) => sum + item.price, 0)

  // 处理支付

  const handlePayment =async()=>{
    const res = await request.get('/addPay/pay',{
      params:{
        id:Date.now(),// 传递支付方式参数
        title:applicationItems[0].name,
        price:applicationItems[0].price,
      }
    })
    console.log('获取支付信息',res);
    if(res.code === 200){
      window.location.href = res.data

        // const res = await request.get('/addPay/query',{
        //   params:{
        //     id:Date.now(),
        //   }
        // })
        // console.log('查询支付信息',res);
        
      
    }
  }


  return (
    <div className={style.container}>
      <Navbar showBack onBack={() => navigate(-1)} title='开单支付' />
      
      <div className={style.openPayBox}>
        {/* 申请项目 */}
        <div className={style.section}>
          
          <Card className={style.itemsCard}>
          <div className={style.sectionTitle}>申请项目</div>
            {applicationItems.map((item) => (
              <div key={item.id} className={style.itemRow}>
                <div className={style.itemLeft}>
                  <div className={style.itemInfo}>
                    <div className={style.itemName}>{item.name}</div>
                    <div className={style.itemQuantity}>数量: {item.quantity}</div>
                    {item.tags && (
                      <div className={style.itemTags}>
                        {item.tags.map((tag, index) => (
                          <span 
                            key={index} 
                            className={`${style.tag} ${index === 0 ? style.prescriptionTag : style.limitTag}`}
                          >
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
                <div className={style.itemPrice}>¥{item.price.toFixed(2)}</div>
              </div>
            ))}
          </Card>
        </div>

        {/* 支付方式 */}
        <div className={style.section}>
          
          <Card className={style.paymentCard}>
          <div className={style.sectionTitle}>支付方式</div>
            <Radio.Group value={paymentMethod} onChange={(val) => setPaymentMethod(val as string)}>
              <div className={style.paymentOption}>
                <span className={style.paymentLabel}>自费支付</span>
                <Radio value="self" />
              </div>
              <div className={style.paymentOption}>
                <span className={style.paymentLabel}>医保支付</span>
                <Radio value="insurance" />
              </div>
            </Radio.Group>
          </Card>
        </div>
      </div>

      {/* 底部支付栏 */}
      <div className={style.bottomBar}>
        <div className={style.totalInfo}>
          <span className={style.totalLabel}>合计:</span>
          <span className={style.totalAmount}>¥{totalAmount.toFixed(2)}</span>
        </div>
        <Button 
          className={style.payButton}
          onClick={()=>handlePayment()}
        >
          立即支付
        </Button>
      </div>
    </div>
  )
}

export default Index
